export default {
  created() {
    this._mix_rangeNode = null;
    this._mix_rangeEndIndex = 0;
  },
  methods: {
    // 获取光标位置
    mix_getCursorIndex() {
      const selection = window.getSelection()
      return selection.focusOffset // 选择开始处 focusNode 的偏移量
    },
    // 获取节点
    mix_getRangeNode() {
      const selection = window.getSelection()
      return selection.focusNode // 选择的结束节点
    },

    // 是否展示 @
    mix_showAt() {
      const node = this.mix_getRangeNode();
      if (!node || node.nodeType !== Node.TEXT_NODE) return false; // 文本节点
      const content = node.textContent || '';
      const regx = /@([^@\s]*)$/
      const match = regx.exec(content.slice(0, this.mix_getCursorIndex()))
      return match && match.length === 2
    },
    // 创建标签
    mix_createAtButton(user) {
      const wrapper = document.createElement('div')
      wrapper.dataset.pickid = user.userId
      wrapper.className = 'choosePick'
      wrapper.contentEditable = 'false'
      const spaceElem = document.createElement('span')
      spaceElem.className = "J_pick-space"
      spaceElem.style.whiteSpace = 'pre'
      spaceElem.textContent = '\u200b'
      spaceElem.contentEditable = 'false'
      const clonedSpaceElem = spaceElem.cloneNode(true)
      wrapper.appendChild(spaceElem)
      wrapper.appendChild(new Text(`@${user.dynamicName || user.realName || user.userName}`))
      wrapper.appendChild(clonedSpaceElem)
      return wrapper
    },
    mix_replaceString(raw, replacer) {
      return raw.replace(/@([^@\s]*)$/, replacer)
    },
    // 插入@标签
    mix_replaceAtUser(user) {
      user.forEach((item) => {
        const node = this._mix_rangeNode;
        const content = node.textContent || '';
        const endIndex = this._mix_rangeEndIndex;
        const preSlice = this.mix_replaceString(content.slice(0, endIndex), '')
        const restSlice = content.slice(endIndex);
        let parentNode = node.parentNode;
        const nextNode = node.nextSibling
        const previousTextNode = new Text(preSlice)
        let nextTextNode = new Text('\u200b' + restSlice) // 添加 0 宽字符
        const atButton = this.mix_createAtButton(item);
        if (parentNode.tagName && parentNode.tagName.toUpperCase() == 'DIV' && parentNode.contentEditable == 'true') {
          parentNode.removeChild(node)
          // 插在文本框中
          if (nextNode) {
            parentNode.insertBefore(previousTextNode, nextNode)
            parentNode.insertBefore(atButton, nextNode)
            parentNode.insertBefore(nextTextNode, nextNode)
          } else {
            parentNode.appendChild(previousTextNode)
            parentNode.appendChild(atButton)
            parentNode.appendChild(nextTextNode)
          }
        } else if (node.tagName && node.tagName.toUpperCase() == 'DIV' && node.contentEditable == 'true') {
          node.appendChild(previousTextNode)
          node.appendChild(atButton)
          node.appendChild(nextTextNode)
        } else {
          nextTextNode = new Text('\u200b');
          let previousTextNode = new Text('\u200b');
          this._mix_contenteditableElem.appendChild(previousTextNode);
          this._mix_contenteditableElem.appendChild(atButton)
          this._mix_contenteditableElem.appendChild(nextTextNode)
        }
        // 重置光标的位置
        const range = new Range()
        const selection = window.getSelection()
        range.setStart(nextTextNode, 0)
        range.setEnd(nextTextNode, 0)
        selection.removeAllRanges()
        selection.addRange(range)
        this.mix_pickUserKeyUp();
      })
    },
    mix_atUserStartByClick(elem) {
      let node = this._mix_rangeNode;
      let parentNode = node.parentNode;
      this._mix_contenteditableElem = elem;
      if (parentNode.tagName && parentNode.tagName.toUpperCase() != 'DIV' && parentNode.contentEditable != 'true') {
        this._mix_rangeNode = node = elem;
      }
      if (node.tagName && node.tagName.toUpperCase() == 'DIV' && node.contentEditable == 'true' && elem.innerHTML == '') {
        let nextTextNode = new Text('\u200b') // 添加 0 宽字符
        node.appendChild(nextTextNode);
        this._mix_rangeNode = nextTextNode;
        this._mix_rangeEndIndex++ ;
        const range = new Range()
        range.setStart(nextTextNode, 0)
        range.setEnd(nextTextNode, 0)
      }
    },
    mix_pickUserKeyUp() {
      this._mix_rangeNode = this.mix_getRangeNode();
      this._mix_rangeEndIndex = this.mix_getCursorIndex();
    },
    mix_insertEmptyTextNode(elem) {
      let textNode = new Text('\u200b') // 添加 0 宽字符
      elem.appendChild(textNode)
      this._mix_rangeNode = textNode;
      this._mix_rangeEndIndex++ ;
      const range = new Range()
      range.setStart(textNode, 0)
      range.setEnd(textNode, 0)
    },
  }
}